<template>
  轨迹回放
  <div id="container" style="width: 100vw; height: 90vh" />
  <div class="input-card">
    <h4>轨迹回放控制</h4>
    <div class="input-item">
      <input
        id="start"
        type="button"
        class="btn"
        value="开始动画"
        @click="startAnimation"
      />
      <input
        id="pause"
        type="button"
        class="btn"
        value="暂停动画"
        @click="pauseAnimation"
      />
    </div>
    <div class="input-item">
      <input
        id="resume"
        type="button"
        class="btn"
        value="继续动画"
        @click="resumeAnimation"
      />
      <input
        id="stop"
        type="button"
        class="btn"
        value="停止动画"
        @click="stopAnimation"
      />
    </div>
  </div>
</template>
<script setup>
import { lazyAMapApiLoaderInstance } from '~/services/injected-amap-api-instance'
let map = shallowRef(null)
let marker = shallowRef(null)
let lineArr = shallowRef(null)
let passedPolyline = shallowRef(null)
lazyAMapApiLoaderInstance.then(() => {
  initMap()
})
function initMap() {
  lineArr.value = [
    [116.478935, 39.997761],
    [116.478939, 39.997825],
    [116.478912, 39.998549],
    [116.478912, 39.998549],
    [116.478998, 39.998555],
    [116.478998, 39.998555],
    [116.479282, 39.99856],
    [116.479658, 39.998528],
    [116.480151, 39.998453],
    [116.480784, 39.998302],
    [116.480784, 39.998302],
    [116.481149, 39.998184],
    [116.481573, 39.997997],
    [116.481863, 39.997846],
    [116.482072, 39.997718],
    [116.482362, 39.997718],
    [116.483633, 39.998935],
    [116.48367, 39.998968],
    [116.484648, 39.999861],
  ]

  // JSAPI2.0 使用覆盖物动画必须先加载动画插件
  AMap.plugin('AMap.MoveAnimation', function () {
    map.value = new AMap.Map('container', {
      resizeEnable: true,
      center: [116.397428, 39.90923],
      zoom: 17,
    })
    marker.value = new AMap.Marker({
      map: map.value,
      position: [116.478935, 39.997761],
      icon: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png',
      offset: new AMap.Pixel(-13, -26),
    })

    // 绘制轨迹
    var polyline = new AMap.Polyline({
      map: map.value,
      path: lineArr.value,
      showDir: true,
      strokeColor: '#28F', //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6, //线宽
      // strokeStyle: "solid"  //线样式
    })

    passedPolyline.value = new AMap.Polyline({
      map: map.value,
      strokeColor: '#AF5', //线颜色
      strokeWeight: 6, //线宽
    })
  })

  marker.value.on('moving', e => {
    passedPolyline.value.setPath(e.passedPath)
    map.value.setCenter(e.target.getPosition(), true)
  })
  map.value.setFitView()
}

const startAnimation = () => {
  marker.value.moveAlong(lineArr.value, {
    // 每一段的时长
    duration: 500, //可根据实际采集时间间隔设置
    // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
    autoRotation: true,
  })
}

const pauseAnimation = () => {
  marker.value.pauseMove()
}

const resumeAnimation = () => {
  marker.value.resumeMove()
}

const stopAnimation = () => {
  marker.value.stopMove()
}
</script>

<style lang="less" scoped>
html,
body,
#container {
  height: 100%;
  width: 100%;
}

.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
</style>
